<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JSBridge测试页面</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
   
   <style type='text/css'>
		html { font-family:Helvetica; color:#222; }
		h1 { color:steelblue; font-size:24px; margin-top:24px; }
		button { margin:0 3px 10px; font-size:12px; }
		.logLine { border-bottom:1px solid #ccc; padding:4px 2px; font-family:courier; font-size:11px; }
	</style>
	
  <script type='text/javascript' src='http://app.cnnb.com.cn/newsh5/libs/JSBridge.min.js' charset='utf-8'></script> 
   
   
    <script type="text/javascript">
    
    var jsKey = "YPCE245F02REF67E";
  
	window.JSBridgeLog = (function() {
		var uniqueId = 0;
		function log(message, data) {
			uniqueId++;
			var obj			= getJsonObj(data);
			var str			= getJsonString(obj);
			var logMsgStr	= uniqueId + '. ' + message + ':<br>' + str;
			var logMsgObj	= uniqueId + '. ' + message + ':<br>' + obj;
			console.log("JSBridge: Log:[OBJ]:"+logMsgObj);
			console.log("JSBridge: Log:[STR]:"+logMsgStr);
		            
			var log = document.getElementById('log');
			var el = document.createElement('div');
			el.className = 'logLine';
			el.innerHTML = logMsgStr;
			if (log.children.length) { log.insertBefore(el, log.children[0]); }
			else { log.appendChild(el); }
		}
		return {Log: log}
	})();
	
	window.log = JSBridgeLog.Log;

	function getJsonString(obj) {
		try {
			return JSON.stringify(obj);
		} catch(e) {}
		return "";
	}
	function getJsonObj(str) {
		try {
			return JSON.parse(str);
		} catch(e) {}
		return str;
	}
	

	//define your native funciton begain
	//获取系统信息 机型、系统版本、设备号等
    function getSysInfo(){
    	
    	JSBridge.callAPI("YpJS.getSysInfo",{jsKey:jsKey},function(json){
    		if(json.status){
    			 log("getSysInfo" + getJsonString(json));
    		}
    						
    	});
    }
	
	//获取已登录用户信息
    function getLoginUserInfo(){
    	
    	JSBridge.callAPI("YpJS.getLoginUserInfo",{jsKey:jsKey},function(json){
			 log("getLoginUserInfo" + JSON.stringify(json));
    		 if(json.status === "true"){	
    			 var data = json.data;
    			 if(data.ret==="0"){	 
    				 var userInfo  =  data.callBackData;
    				 log("user Info=" + JSON.stringify(userInfo)); 
    			 }else{
    				 alert(data.msg);
    			 } 
    		}
    						
    	});	
    }
	
	//获取关闭当前容器 status 0:调用失败  1:调用成功
	function dismissWebview(){
    	
    	JSBridge.callAPI("YpJS.dismissWebview",{jsKey:jsKey},function(json){
    		 log("dismissWebview" + JSON.stringify(json));
    		 if(json.status === "true"){	
    			 var data = json.data;
    			 if(data.ret==="0"){	 
    				 var dataJson  =  data.callBackData;
    				 log("dismiss status=" + JSON.stringify(dataJson)); 
    			 }else{
    				 alert(data.msg);
    			 } 
    		}
    						
    	});	
   	 }
	
	/*分享调用 
	   @param ShareMessageType   0:视频 1:音乐 2:图片 3:网页 4:其他 

	*/
	function shareAction(){
		
    	JSBridge.callAPI("YpJS.shareAction",{ShareMessageType:'3',title:'测试标题',subtitle:'副标题',thumbURL:'缩略图地址',objectUrl:'内容地址'},function(json){
    		 log("shareAction" + JSON.stringify(json));
    		 if(json.status === "true"){	
    			 var data = json.data;
    			 if(data.ret==="0"){	 
    				 var dataJson  =  data.callBackData;
    				 log("share status=" + JSON.stringify(dataJson)); 
    			 }else{
    				 alert(data.msg);
    			 } 
    		}
    						
    	});	
   	 }

    //define your native funciton end
   

    //zepto and JSBridge ready
    function doInit(){
    	
    	
    }
    
    
    //donot modify begain
    function connectJSBridge(callback) {
        if (window.JSBridge) {
            callback(JSBridge)
        } else {
            document.addEventListener('JSBridgeReady', function() {
                callback(JSBridge)
            }, false)
        }
    }
    
    window.onload = function(){
    	
    	   connectJSBridge(function(bridge) {
    		   
   	        bridge.init(function(message, responseCallback) {
   	            console.log('Native call default JSHandler', message)
   	        })

   	        //js 
   	        bridge.registerEvent('nativeJSHandler', function(message, responseCallback) {
   	            log('Native call JSHandler', message);
   	            var responseData = { 'Javascript Says':'I got the nativeJSHandler  message!' };
   	            log('JS responding with', responseData)
   	            bridge.callEventCallback(responseCallback,responseData,message);
   	        })

   	        doInit(); 
   	    });		      
    	
    	
    }
    

    //donot modify end
    </script>

  </head>
  <body>
   
 <div class="content">
 
    <button type="button" class="btn btn-primary" onclick="document.getElementById('log').innerHTML = ''">Clear Log</button>
    <br>
     <button type="button" class="btn btn-primary" onclick="getSysInfo()">1.获取系统信息</button> 
	 <button type="button" class="btn btn-primary" onclick="getLoginUserInfo()">2.获取用户登录信息</button>  
	 <button type="button" class="btn btn-primary" onclick="dismissWebview()">3.关闭</button>     
	 <button type="button" class="btn btn-primary" onclick="shareAction()">4.分享</button>     
    <br>
    <div id='log'></div>
 
</div>

 

  </body>
</html>